<template>
  <md-nav-bar title="验证码" />
  <view class="container">
    <view class="title">请输入验证码</view>
    <view class="sub">我们已给手机号{{ data.phone }}发送了一个6位数的验证码，输入验证码登录</view>
    <xt-verify-code v-model="data.verifyCode" @confirm="confirm"></xt-verify-code>
    <view class="flex-b">
      <view>首次登录将自动注册</view>
      <view class="flex-c">
        <uni-countdown :showDay="false" :showHour="false" :showMinute="false" :second="data.second" @timeup="timeup" />
        秒重新获取
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 工具
import { Toast } from '@/utils/util';
// 接口
import { sms_login } from '@/api';

const data = reactive({
  phone: '',
  verifyCode: '',
  second: 59,
  wx_code: '',
});

// 倒计时结束回调
const timeup = () => {
  uni.showToast({
    title: '倒计时结束',
  });
  uni.navigateBack();
  uni.setStorageSync('code', '');
};

const confirm = (code: string) => {
  fetchSmsLogin(code);
};

/**
 * 接口相关
 */

const fetchSmsLogin = async (code: string) => {
  try {
    const res = await sms_login({
      mobile: data?.phone,
      wx_code: data?.wx_code,
      sms_code: code,
    });
    Toast(res.msg);
    uni.setStorageSync('token', res.data.token);
    uni.setStorageSync('isRefresh', 1);
    // 返回的页面执行刷新
    setTimeout(() => {
      uni.navigateBack({
        delta: 2,
      });
    }, 500);
  } catch (error) {}
};

onLoad(options => {
  data.phone = options?.phone;
  data.wx_code = options?.wx_code;
});
</script>

<style lang="scss" scoped>
.container {
  padding: 66rpx;
  margin-top: 200rpx;
  box-sizing: border-box;
  .title {
    font-weight: bold;
    font-size: 60rpx;
    color: $title;
  }
  .sub {
    color: $sub;
    font-size: $fs-28;
    margin: 46rpx 0;
  }
  .flex-b {
    color: $sub;
    font-size: $fs-28;
    margin-top: 40rpx;
  }
}
</style>
